<template>
  <div class="page-search">
    <binQueryForm :formConfig="formConfig">
      <template #btnFunction>
        <el-button type="primary" :icon="EditPen" @click="handleNewClick" plain>新增</el-button>
        <el-button color="#f173ac" :icon="Upload" plain @click="handleUploadClick">批量上传</el-button>
        <el-button color="#f26522" :icon="Download" plain @click="handleDownloadClick">数据导出</el-button>
      </template>
    </binQueryForm>
    <UploadExcel ref="uploadExcelRef" :pageInfo="uploadExcelInfo"/>
  </div>
</template>

<script setup>
import { EditPen, Upload, Download } from '@element-plus/icons-vue'
import binQueryForm from '@/base-ui/queryForm'
import { defineProps, ref } from 'vue';
import { useRoute } from 'vue-router';
import UploadExcel from '@/components/UploadExcel'

const props = defineProps({
  formConfig: {
    type: Object,
    default: {}
  }
})

const emit = defineEmits(['handleNewClick', 'handleDownloadClick', 'handleUploadClick'])

const uploadExcelRef = ref(null)
const uploadExcelInfo = ref({
  role: props.formConfig.userRole
})

// 点击添加，发出事件给父组件
const handleNewClick = () => {
  emit('handleNewClick')
}
const route = useRoute()
// 点击导出，发出事件给父组件
const handleDownloadClick = () => {
  emit('handleDownloadClick', route.meta.title)
}

// 文件上传
const handleUploadClick = () => {
  uploadExcelRef.value.uploadDialog = true
}
</script>

<style lang="less" scoped></style>
